<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>确认订单</title>
        <jsp:include page="top-link.jsp"></jsp:include>
        <link rel="shortcut icon" href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/head.css"/>
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/buy.css"/>
        <style type="text/css">
            .center {
                width: 80%;
                height: 300px;
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
            }

            .center .center_left {
                width: 70%;
                height: 100%;
                margin-top: 50px;
                text-align: center;
                /* background-color: red; */
            }

            .center .center_center {
                width: 10%;
            }

            .center .center_right {
                width: 25%;
                height: 100%;
                margin-top: 30px;
                /* background-color: #007DDB; */
            }

            .star_color {
                color: red;
            }
        </style>
    </head>
    <body>
        <%-- 头部导航栏 --%>
        <%@include file="top-nav.jsp" %>

        <div class="layui-container" style="margin-top: 20px">
            <div class="layui-row">
                <div class="layui-progress layui-progress-big">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="50%">
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 80%; margin: 0 auto;">
            <div class="buy-header">
                <div class="stepbar">
                    <div class="step-wrap">
                        <div class="step active">
                            <div class="circle">
                                <div class="text">1</div>
                            </div>
                            <div class="zi" style="position: absolute;top:40px;left: -1%"><span>选择商品</span></div>
                        </div>
                        <div class="step active half">
                            <div class="circle">
                                <div class="text">2</div>
                            </div>
                            <div class="zi" style="position: absolute;top:40px;left: 23%"><span>确认订单信息</span></div>
                        </div>

                        <div class="step">
                            <div class="circle">
                                <div class="text">3</div>
                            </div>
                            <div class="zi" style="position: absolute;top:40px;left: 49.5%"><span>支付订单</span></div>
                        </div>

                        <div class="step">
                            <div class="circle">
                                <div class="text">4</div>
                            </div>
                            <div class="zi1" style="position: absolute;top:40px;left: 74.3%"><span>收取商品</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center_left">
                <div id="test2" class="demo-transfer"></div>
            </div>
            <div class="center_right">
                <botton class="layui-btn layui-btn-normal" onclick="openModak()"
                        style="float: right;margin-top: 5px;margin-right:20px">
                    添加常用购票人
                </botton>
            </div>
        </div>
        <div class="" style="width: 80%; margin: 0 auto;">
            <div class="layui-card">
                <div class="layui-card-header">支付方式</div>
                <div class="layui-card-body">
                    <span style="font-size: large">微信支付 </span> 您的订单已经生成，请在15分钟之内付款！
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">确认订单信息</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="" lay-filter="example">
                        <div class="layui-form-item" style="width: 220px">
                            <div style="width: 1200px">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>订单编号</th>
                                            <th>票品名称</th>
                                            <th>票品时间</th>
                                            <th>票品场馆</th>
                                            <th>座位号码</th>
                                            <%--                                            <th>票品张数</th>--%>
                                            <th>订单金额</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td hidden id="orderInfoId">${jsonData.data[0].orderInfoId}</td>
                                            <td hidden
                                                id="orderInfoTicketDetailsId">${jsonData.data[0].orderInfoTicketDetailsId}</td>
                                            <td>${jsonData.data[0].orderNumber}</td>
                                            <td>${jsonData.data[0].ticketDetailsInfo}</td>
                                            <td>
                                                <fmt:formatDate value="${jsonData.data[0].ticketTime}" var="time"
                                                                pattern="yyyy.MM.dd"/> ${time}
                                            </td>
                                            <td>${jsonData.data[0].ticketAddressVenue}</td>
                                            <td id="seats">${jsonData.data[0].seats}</td>
                                            <td>${jsonData.data[0].orderInfoTotalPrice}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                    <p>实付款：￥ ${jsonData.data[0].orderInfoTotalPrice}</p>
                    <form>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <input id="isChecked" type="checkbox" name="isChecked" lay-skin="primary" title="">
                            </label>
                            <div class="layui-input-inline">
                                我已经阅读并同意《大麦网订票服务条款》 同意"票品为不记名凭证，请您妥善保管，遗失不补"
                            </div>
                        </div>
                        <p>
                            <button type="button" id="submit" class="layui-btn layui-btn-normal"
                                    style="background-color: gray;" lay-submit=""
                                    lay-filter="" onclick="submitOrder()" disabled="disabled">确认付款
                            </button>
                        </p>
                    </form>
                </div>
            </div>

            <!-- 尾部导航 -->
            <%@include file="foot-nav.jsp" %>
            <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
            <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/js/verify-account.js"
                    type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                // 设置颜色 同意条款和选中保持一致
                layui.use(['jquery'], function () {
                    $('#isChecked').click(function () {
                        var val = $("#isChecked").is(":checked");
                        if (val) {
                            // 如果是选中状态
                            // 设置为不是选中状态
                            $("#isChecked").prop("checked", false);
                            // 然后设置提交按钮为不可提交
                            $('#submit').css("background-color", "gray")
                            $("#submit").attr('disabled', true);
                        } else {
                            // 如果是未选中状态
                            // 设置为是选中状态
                            $("#isChecked").prop("checked", true);
                            // 然后设置提交按钮为可提交
                            $("#submit").attr('disabled', false);
                            $('#submit').css("background-color", "#1e9fff")
                        }
                    })
                })

                layui.use(['element'], function () {
                })

                layui.use(['transfer', 'layer', 'util'], function () {
                    var $ = layui.$
                        , transfer = layui.transfer
                        , layer = layui.layer
                        , util = layui.util;

                    //模拟数据
                    var data1 = [
                        <c:forEach items="${jsonData.data[1]}" var="u" varStatus="status">
                        {
                            "value": "${status.index+1}",
                            "title": "<pt id='${u.buyerTicketId}'>${u.buyerTicketUsername}</pt>"
                        },
                        </c:forEach>
                    ]

                    //定义标题及数据源
                    transfer.render({
                        elem: '#test2'
                        , title: ['我的购票人', '选择的购票人']  //自定义标题
                        , data: data1
                        , width: 250 //定义宽度
                        , height: 250 //定义高度
                    })

                })

                function openModak() {
                    layui.use(['layer', 'jquery'], function () {
                        var layer = layui.layer,
                            $ = layui.jquery;
                        layer.open({
                            type: 1, //类型
                            area: ['600px', '400px'], //定义宽和高
                            title: '添加常用购票人', //题目
                            shadeClose: false, //点击遮罩层关闭
                            content: $('#motaikunag') //打开的内容
                        });
                    })
                }

                /**
                 * 提交订单
                 */
                function submitOrder() {
                    let seats = $("#seats").text();
                    console.log(seats)
                    let strArray = seats.split(',');
                    let elementsByClassName = document.getElementsByClassName("layui-transfer-box")[1].getElementsByTagName("pt");
                    // 判断数量
                    if (elementsByClassName.length != strArray.length) {
                        layui.use(['form', 'jquery'], function () {
                            layer.open({
                                title: '系统提示',
                                content: "你选了" + strArray.length + "张票，但是选了" + elementsByClassName.length + "个观影人。请重新选嗷！"
                            });
                        })
                    } else {
                        // 取出购票人 id 发送到
                        let buyTicketId = []
                        for (let i = 0; i < elementsByClassName.length; i++) {
                            let id = elementsByClassName[i].getAttribute("id");
                            buyTicketId.push(id)
                        }
                        // 发送数据到后端
                        $.ajax({
                            url: "${pageContext.request.contextPath}/api/v1/pri/user/to-buy-page-confirm",
                            traditional: true,
                            type: "post",
                            data: {
                                "list": buyTicketId,
                                "orderInfoId": $("#orderInfoId").text(),
                                "ticketId": $("#orderInfoTicketDetailsId").text()
                            },
                            success: function (result) {
                                if (result.code == 0) {
                                    // 成功
                                    layui.use([], function () {
                                        // 跳转到 支付宝支付 页面
                                        window.location = "${pageContext.request.contextPath}/api/v1/pri/common/alipay?orderInfoId=" + $("#orderInfoId").text()
                                    })
                                } else if (result.code == -1) {
                                    // 失败
                                    layui.use([], function () {
                                        layer.open({
                                            title: '系统提示',
                                            content: result.msg
                                        });
                                    })
                                } else {
                                    // 失败 网络异常
                                    layui.use([], function () {
                                        layer.open({
                                            title: '系统提示',
                                            content: "网络异常"
                                        });
                                    })
                                }
                            }
                        })
                    }
                }
            </script>
    </body>
    <!--模仿bootstrap的模态框-->
    <div id="motaikunag" style="display: none;">
        <form class="layui-form" method="post"
              action="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-add-buy" style="margin-top: 70px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="hidden" name="orderId" value="${jsonData.data[0].orderInfoId}">
                    <input type="hidden" name="userInfoId" value="${user_id}">
                    <label class="layui-form-label"><span class="star_color">*</span> 姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="buyerTicketUsername" name="buyerTicketUsername" lay-verify="required"
                               autocomplete="off" placeholder="真实姓名"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="star_color">*</span> 证件类型</label>
                <div class="layui-input-inline">
                    <select id=buyerTicketDocumentType" name="buyerTicketDocumentType" lay-verify="required">
                        <option value="">证件类型</option>
                        <option value="1">居民身份证</option>
                        <option value="2">护照</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="star_color">*</span>身份证</label>
                <div class="layui-input-block">
                    <input type="text" id="buyerTicketIdCardNumber" name="buyerTicketIdCardNumber"
                           lay-verify="required|identity" placeholder="请输入身份证"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <input type="hidden" name="add-ticket-people" value="add-ticket-people">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" style="background-color: #1e9fff;" lay-submit=""
                            lay-filter="verify" id="add_btn">保存
                    </button>
                    <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</html>
